<template>
  <div class="outTicketException">
    <el-form
      ref="form"
      :model="form"
      :inline="true"
      class="abnormal"
      size="small"
    >
      <div>
        <el-form-item>
          <el-radio-group v-model="form.ticketChannel" @change="radioChange">
            <el-radio-button label="BSP" name="ticketChannel"></el-radio-button>
            <el-radio-button label="B2B" name="ticketChannel"></el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-radio-group v-model="form.ticketWay" @change="ticketWayChange">
            <el-radio-button
              label="directAirConnection"
              name="directAirConnection"
              >航空直连</el-radio-button
            >
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-radio-group v-model="form.orderType" @change="orderTypeChange">
            <el-radio-button label="reserve" name="reserve"
              >PNR异常监控</el-radio-button
            >
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button @click="clear">全部</el-button>
        </el-form-item>
      </div>
      <el-form-item label="订单号">
        <el-input v-model="form.orderId"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getflightOrderExceptionList"
          >查询</el-button
        >
        <!-- <el-button>标记</el-button>
        <el-button>取消标记</el-button> -->
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      border
      class="account_table"
      size="mini"
      :header-cell-style="{
        color: '#fff',
        background: '#6090EC',
        fontSize: '11px',
        fontWeight: 'normal',
      }"
    >
      <el-table-column
        prop="orderId"
        label="订单号"
        width="150"
      ></el-table-column>
      <el-table-column prop="pnr" label="PNR"></el-table-column>
      <el-table-column prop="passenger" label="乘客"></el-table-column>
      <el-table-column prop="flightinfo" label="航程"></el-table-column>
      <el-table-column prop="flightno" label="航班"></el-table-column>
      <el-table-column
        prop="departureTime"
        label="起飞时间"
        width="150"
      ></el-table-column>
      <el-table-column prop="ticketChannel" label="出票渠道"></el-table-column>
      <el-table-column prop="sourceWay" label="订单来源"> </el-table-column>
      <el-table-column prop="outticketType" label="出票途径">
        <template slot-scope="scope">
          <span>{{
            scope.row.outticketType == "Spring"
              ? "春秋"
              : scope.row.outticketType == "LinkStar"
              ? "领达"
              : scope.row.outticketType == "Qunar"
              ? "去哪儿"
              : scope.row.outticketType == "DR"
              ? "瑞丽"
              : scope.row.outticketType == "G5"
              ? "华夏"
              : scope.row.outticketType == "HangBanGuanJia"
              ? "航班管家"
              : ""
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="exceptionInfo" label="异常描述"></el-table-column>
      <el-table-column prop="status" label="状态" width="120">
        <template slot-scope="scope">
          <template v-if="scope.row.status == 'processed'">已处理</template>
          <template v-if="scope.row.status == 'untreated'">未处理</template>
        </template>
      </el-table-column>
      <el-table-column prop="right" label="操作" width="200">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" size="small"
            >处理</el-button
          >
          <!-- <el-button size="small">取消订单</el-button> -->
        </template>
      </el-table-column>
      <!-- <el-table-column prop="right" label="修改" width="200">
        <template slot-scope="scope">
          <el-popconfirm
            title="这是一段内容确定删除吗？"
            @confirm="modifybanksrepeat"
          >
            <el-button
              slot="reference"
              size="small"
              @click="banksrepeat(scope.row)"
              >修改为票号重复</el-button
            >
          </el-popconfirm>
        </template>
      </el-table-column> -->
    </el-table>
    <!-- 分页 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageTotal"
      >
      </el-pagination>
    </div>

    <!-- 查看异常订单详情 -->
    <el-dialog
      title="出票处理"
      :visible.sync="drawer"
      :close-on-click-modal="false"
      width="80%"
    >
      <el-descriptions
        size="small"
        title="订单基本信息"
        direction="horizontal"
        :column="4"
        border
      >
        <el-descriptions-item label="订单号">{{
          message.orderId
        }}</el-descriptions-item>
        <el-descriptions-item label="PNR"
          >{{ message.pnr }}
          <el-button
            size="mini"
            @click="editPnr"
            v-loading.fullscreen.lock="fullscreenLoading"
            >修改PNR</el-button
          ></el-descriptions-item
        >
        <el-descriptions-item label="行动代码">{{
          message.actionCode
        }}</el-descriptions-item>
        <el-descriptions-item label="订单状态">{{
          message.status == "cancelled"
            ? "已取消"
            : message.status == "refundProgress"
            ? "退票中"
            : message.status == "noTravel"
            ? "未出行"
            : message.status == "rescheduled"
            ? "改期中"
            : message.status == "changeTicketSuccess"
            ? "改期成功"
            : message.status == "changeTicketFail"
            ? "改期失败"
            : message.status == "refundTicketStatus_success"
            ? "退票完成"
            : message.status == "ticketingFail"
            ? "出票失败"
            : ""
        }}</el-descriptions-item>
        <el-descriptions-item label="航程">{{
          message.flightinfo
        }}</el-descriptions-item>
        <el-descriptions-item label="航班">{{
          message.flightno
        }}</el-descriptions-item>
        <el-descriptions-item label="期望出票时间">{{
          message.expectOutTime
        }}</el-descriptions-item>
        <el-descriptions-item label="配单时间">{{
          message.assignDate
        }}</el-descriptions-item>
        <el-descriptions-item label="支付状态">{{
          message.guestPymtStsId == "waitpay"
            ? "待支付"
            : message.guestPymtStsId == "failPay"
            ? "支付失败"
            : message.guestPymtStsId == "payd"
            ? "已支付"
            : message.guestPymtStsId == "cancelled"
            ? "已取消"
            : message.guestPymtStsId == "waitPay"
            ? "待支付"
            : ""
        }}</el-descriptions-item>
        <el-descriptions-item label="支付方式">{{
          message.payType=='Wechat' ? '微信' 
          : message.payType=='Alipay' ? '支付宝'
          : message.payType=='UnionPay' ? '银联'
          : message.payType=='UnionPayQRCode' ? '银联二维码支付'
          : message.payType=='BankDebit' ? '借记卡'
          : message.payType=='BankCredit' ? '信用卡'
          : message.payType=='UnionQRCodePay' ? '银联二维码'
          : message.payType=='PhoneSoundPa' ? '电话语音支付'
          : message.payType=='PresentPay'?'总办赠卡支付'
          :'暂无支付方式'
        }}</el-descriptions-item>
        <el-descriptions-item label="订单来源">{{
          message.sourceTypeId
        }}</el-descriptions-item>
      </el-descriptions>

      <div class="header-1">乘客信息</div>
      <el-table
        border
        :data="message.passengers"
        size="mini"
        :header-cell-style="{
          color: '#fff',
          background: '#6090EC',
          fontSize: '11px',
          fontWeight: 'normal',
        }"
      >
        <el-table-column prop="guestName" label="乘客姓名" width="160">
        </el-table-column>
        <el-table-column prop="guestIdno" label="证件号" width="200">
        </el-table-column>
        <el-table-column prop="guestType" label="类型" width="160">
        </el-table-column>
        <el-table-column prop="airportFee" label="机建" width="160">
        </el-table-column>
        <el-table-column prop="fuelFee" label="燃油" width="160">
        </el-table-column>
        <el-table-column prop="ticketPrice" label="票面价" width="160">
        </el-table-column>
        <el-table-column prop="ticketNo" label="票号" width="160">
          <template slot-scope="scope">
            <template>
              <el-input v-model="scope.row.ticketNo" placeholder=""></el-input>
            </template>
          </template>
        </el-table-column>
        <el-table-column prop="cabin" label="舱位标识" width="160">
        </el-table-column>
      </el-table>
      <el-descriptions
        size="small"
        title="自动出票任务"
        direction="vertical"
        :column="4"
        border
      >
        <el-descriptions-item label="出票渠道">
          <el-select clearable v-model="message.ticketChannel" placeholder="请选择">
            <el-option
              v-for="(item, index) in options"
              :key="index"
              :label="item.ticketChannels"
              :value="item.ticketChannel"
            >
            </el-option>
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="公司备注">{{
          message.gcMemo
        }}</el-descriptions-item>
        <el-descriptions-item label="大编">{{
          message.bigpnr
        }}</el-descriptions-item>
        <el-descriptions-item label="支付总金额">{{
          message.payAmount
        }}</el-descriptions-item>
      </el-descriptions>
      <div class="mess">
        <el-button type="primary" @click="getpayOrder">完成出票</el-button>
        <el-button type="primary" @click="getupdateTicketChannel"
          >修改出票途径</el-button
        >
        <el-button type="primary" @click="ModifyBanks">修改票号</el-button>
         <el-button type="primary" @click="drawer=false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { Loading } from "element-ui";
export default {
  name: "flightOrderException",
  components: {
    Loading,
  },
  data() {
    return {
      fullscreenLoading: false,
      form: {
        ticketChannel: "",
        orderType: "",
        orderId: "",
        ticketWay: "",
      },
      formInline: {},
      tableData: [],
      pageSize: 10,
      currentPage: 1,
      pageTotal: 0,
      orders: [],
      drawer: false,
      message: {},
      ticketChannel: "",
      options: [
        {
          id: 0,
          ticketChannel: "bsp",
          ticketChannels: "BSP",
        },
        {
          id: 1,
          ticketChannel: "b2b",
          ticketChannels: "B2B",
        },
      ],
    };
  },
  methods: {
    radioChange() {
      this.form.ticketWay = "";
      this.form.orderId = "";
      this.form.orderType = "";
    },
    ticketWayChange() {
      this.form.ticketChannel = "";
      this.form.orderId = "";
      this.form.orderType = "";
    },
    orderTypeChange() {
      this.form.ticketChannel = "";
      this.form.ticketWay = "";
      this.form.orderId = "";
    },
    // 查询全部
    clear() {
      this.form.ticketChannel = "";
      this.form.ticketWay = "";
      this.form.orderId = "";
      this.form.orderType = "";
    },
    // 分页
    handleSizeChange(value) {
      console.log("1", value);
      localStorage.setItem("pageSize", value);
      localStorage.setItem("pageNum", 1);
      this.getflightOrderExceptionList();
      this.pageSize = value;
    },
    handleCurrentChange(value) {
      console.log("2", value);
      localStorage.setItem("pageNum", value);
      localStorage.setItem("pageSize", this.pageSize);
      this.currentPage = value;
      this.getflightOrderExceptionList();
    },

    // 机票异常监控列表
    getflightOrderExceptionList() {
      this.$axios
        .getflightOrderExceptionList({
          orderId: this.form.orderId,
          ticketChannel: this.form.ticketChannel,
          ticketWay: this.form.ticketWay,
          orderType: this.form.orderType,
        })
        .then((res) => {
          if (res.code == "200") {
            if (res.data.length < 1) {
              // this.$message("未查询到数据");
              this.tableData = res.data;
              this.pageTotal=res.total
              
            } else {
               this.pageTotal=res.total
              // this.$message({
              //   message: res.msg,
              //   type: "success",
              // });
              let arr = [];
              let arr1 = res.data;
              if (arr1.length > 1) {
                for (let i = 0; i < arr1.length; i++) {
                  let obj = {
                    orderId: arr1[i].orderId,
                    pnr: arr1[i].pnr,
                    passenger: arr1[i].passenger,
                    ticketChannel: arr1[i].ticketChannel,
                    sourceWay: arr1[i].sourceWay,
                    outticketType: arr1[i].outticketType,
                    exceptionInfo: arr1[i].exceptionInfo,
                    status: arr1[i].status,
                    flightinfo: arr1[i].flightinfo,
                    flightno: arr1[i].flightno,
                    departureTime: arr1[i].departureTime,
                    item: arr1,
                  };
                  let obj1 = {
                    orderId: arr1[i + 1].orderId,
                    pnr: arr1[i + 1].pnr,
                    passenger: arr1[i + 1].passenger,
                    ticketChannel: arr1[i + 1].ticketChannel,
                    sourceWay: arr1[i + 1].sourceWay,
                    outticketType: arr1[i + 1].outticketType,
                    exceptionInfo: arr1[i + 1].exceptionInfo,
                    status: arr1[i + 1].status,
                    flightinfo: arr1[i + 1].flightinfo,
                    flightno: arr1[i + 1].flightno,
                    departureTime: arr1[i + 1].departureTime,
                    item: arr1,
                  };
                    if (arr1[i].orderId == arr1[i + 1].orderId) {
                    arr.push(obj);
                  } else {
                    arr.push(obj1);
                  }
                  this.tableData = arr;
                  console.log(this.tableData);
                }
              } else {
                for (let i = 0; i < arr1.length; i++) {
                  let obj = {
                    orderId: arr1[i].orderId,
                    pnr: arr1[i].pnr,
                    passenger: arr1[i].passenger,
                    ticketChannel: arr1[i].ticketChannel,
                    sourceWay: arr1[i].sourceWay,
                    outticketType: arr1[i].outticketType,
                    exceptionInfo: arr1[i].exceptionInfo,
                    status: arr1[i].status,
                    flightinfo: arr1[i].flightinfo,
                    flightno: arr1[i].flightno,
                    departureTime: arr1[i].departureTime,
                    item: arr1,
                  };
                  arr.push(obj);

                  this.tableData = arr;
                  console.log(this.tableData);
                }
              }
            }
          }
        });
    },

    // 机票异常订单出票处理
    getorderExceptionDetails(id) {
      this.$axios
        .getorderExceptionDetails({
          orderId: id,
        })
        .then((res) => {
          if (res.code == "200") {
            console.log(res);
            this.message = res.data;
          } else {
              this.$message({
                message: res.msg,
                type: "success",
              });
          }
        });
    },

    // 处理事件
    handleClick(row) {
      console.log(row);
      this.drawer = true;
      this.getorderExceptionDetails(row.orderId);
    },

    // 修改机票出票途径
    getupdateTicketChannel() {
      this.$axios
        .getupdateTicketChannel({
          orderId: this.message.orderId,
          ticketChannel: this.message.ticketChannel,
        })
        .then((res) => {
          if (res.code == "200") {
            this.$message({
              message: res.msg,
              type: "success",
            });
            console.log(res);
            this.drawer = false;
            this.getflightOrderExceptionList();
          }
        });
    },

    // 点击修改票号
    ModifyBanks() {
       this.$confirm("确认修改票号吗？", "提示", {
          confirmButtonText: "确定",
          type: "warning",
        }) .then((res) => {
            if(this.message.passengers[0].ticketNo == ""){
                this.$message({
                message:"请先填写票号",
                type: "warning",
              });
            }else{
            this.getupdateTicketNo();
            }
          })
    },

    // 修改票号
    getupdateTicketNo() {
      let infoTickets = [];
      let obj = {
        orderId: this.message.orderId,
        guestIdno: this.message.passengers[0].guestIdno,
        ticketNo: this.message.passengers[0].ticketNo,
      };
      infoTickets.push(obj);
      this.$axios
        .getupdateTicketNo({
          infoTickets: infoTickets,
        })
        .then((res) => {
          if (res.code == "200") {
            this.$message({
              message: res.msg,
              type: "success",
            });
            console.log(res);
            this.drawer = false;
            this.getflightOrderExceptionList();
          }
        });
    },
    // 完成出票
    getpayOrder() {
      const loading = this.$loading({
        lock: true,
        text: "出票中，请稍后",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      this.$axios
        .getpayOrder({
          OrderID: this.message.orderId,
        })
        .then((res) => {
          loading.close();
          if (res.code == "200") {
            this.$message({
              message: res.msg,
              type: "success",
            });
            console.log(res);
            this.drawer = false;
            this.getflightOrderExceptionList();
          }
        });
    },

    // 点击修改pnr
    editPnr() {
      this.$confirm("确认修改pnr吗？", "提示", {
        confirmButtonText: "确定",
        type: "warning",
      })
        .then((res) => {
          this.getoperationPNR();
        })
        .catch((err) => {
          this.drawer = false;
        });
    },

    // 操作PNR
    getoperationPNR() {
      localStorage.setItem("isToken", true);
      // this.Loading = true;
      const loading = this.$loading({
        lock: true,
        text: "修改中，请稍后",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      this.$axios
        .getoperationPNR({
          orderId: this.message.orderId,
        })
        .then((res) => {
          loading.close();
          
          if (res.code == "200") {
            this.$message({
              message: res.msg,
              type: "success",
            });
            console.log(res);
            this.drawer = false;
            this.getflightOrderExceptionList();
          }
        });
    },
    handleClose() {
      this.drawer = false;
    },
  },
  mounted() {
    this.getflightOrderExceptionList();
  },
};
</script>

<style scoped>
/* .outTicketException {
} */
.abnormal {
  margin: 30px 0 0 30px;
}
.account_table {
  width: 95%;
  margin: 0 0 0 30px;
}
.header-1 {
  line-height: 56px;
  font-weight: bold;
  color: #000000;
  font-size: 16px;
}
.el-descriptions {
  margin-top: 18px;
}
.mess {
  margin-top: 30px;
  text-align: center;
}
::v-deep .el-dialog__body {
  padding-top: 0px;
}
</style>